﻿<phone:PhoneApplicationPage
    x:Class="AnalogClock.WindowsPhone.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:common="clr-namespace:AnalogClock.Common"
    mc:Ignorable="d"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    shell:SystemTray.IsVisible="True">

    <phone:PhoneApplicationPage.Resources>
        <common:ClockModel x:Key="clockModel"
                           IsSweepSecondHand="True" />

        <Style x:Key="pathStyle"
               TargetType="Path">
            <Setter Property="Fill" Value="{StaticResource PhoneAccentColor}" />
            <Setter Property="Stroke" Value="{StaticResource PhoneForegroundColor}" />
            <Setter Property="StrokeThickness" Value="2" />
            <Setter Property="StrokeStartLineCap" Value="Round" />
            <Setter Property="StrokeEndLineCap" Value="Round" />
            <Setter Property="StrokeLineJoin" Value="Round" />
            <Setter Property="StrokeDashCap" Value="Round" />
        </Style>
    </phone:PhoneApplicationPage.Resources>

    <Grid x:Name="LayoutRoot" Background="Transparent">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <!--TitlePanel contains the name of the application and page title-->
        <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
            <TextBlock x:Name="ApplicationTitle" Text="ANALOG CLOCK" Style="{StaticResource PhoneTextNormalStyle}"/>
        </StackPanel>

        <Viewbox Grid.Row="1"
                 Margin="12 0">

            <!-- Draw clock on Grid with center at (0, 0), 100-pixel radius -->
            <Grid Width="200" Height="200"
                  DataContext="{StaticResource clockModel}">

                <!-- Transform for entire clock -->
                <Grid.RenderTransform>
                    <TranslateTransform X="100" Y="100" />
                </Grid.RenderTransform>

                <!-- Tick marks (small and large). -->
                <Path Data="M 0 -90 A 90 90 0 1 1 0 90
                                    A 90 90 0 1 1 0 -90"
                      Style="{StaticResource pathStyle}"
                      Fill="{x:Null}"
                      StrokeDashArray="0 3.14159"
                      StrokeThickness="3" />

                <Path Data="M 0 -90 A 90 90 0 1 1 0 90
                                    A 90 90 0 1 1 0 -90"
                      Style="{StaticResource pathStyle}"
                      Fill="{x:Null}"
                      StrokeDashArray="0 7.854"
                      StrokeThickness="6" />

                <!-- Hour hand pointing up. -->
                <Path Data="M 0 -60 C 0 -30, 20 -30, 5 -20 L 5 0 
                                    C 5 7.5, -5 7.5, -5 0 L -5 -20 
                                    C -20 -30, 0 -30 0 -60"
                      Style="{StaticResource pathStyle}">
                    <Path.RenderTransform>
                        <RotateTransform Angle="{Binding HourAngle}" />
                    </Path.RenderTransform>
                </Path>

                <!-- Minute hand pointing up. -->
                <Path Data="M 0 -80 C 0 -75, 0 -70, 2.5 -60 L 2.5 0
                                    C 2.5 5, -2.5 5, -2.5 0 L -2.5 -60
                                    C 0 -70, 0 -75, 0 -80" 
                      Style="{StaticResource pathStyle}">
                    <Path.RenderTransform>
                        <RotateTransform Angle="{Binding MinuteAngle}" />
                    </Path.RenderTransform>
                </Path>

                <!-- Second hand pointing up. -->
                <Path Data="M 0 10 L 0 -80"
                      Style="{StaticResource pathStyle}">
                    <Path.RenderTransform>
                        <RotateTransform Angle="{Binding SecondAngle}" />
                    </Path.RenderTransform>
                </Path>
            </Grid>
        </Viewbox>
    </Grid>
</phone:PhoneApplicationPage>